<template>
	<view class="classifyPage">

		<view class="classify-Content">
			<view :style="{top:`0px; 			position: sticky; z-index:10;background-color: #fff;`}">
				<headerNavbarVue title='分类'></headerNavbarVue>

				<view class="title-box">
					<view class="text">西望精选</view>
				</view>
				<!-- 锚点栏 -->
				<scroll-view scroll-x="true" class="itembox">
					<view class="tab-buttons" v-show="isAnchorBarVisible" :style="tabBarStyle">
						<view v-for="(item,index) in ClassifList" class="tab-button"
							:class="{ active: activeAnchor === item.id }" @click="scrollToSection(item.id)">
							{{item.categryName}}
						</view>

					</view>
				</scroll-view>

			</view>

			<view class="category-box">
				<view class="category-card" :id="`section-${item.id}`" v-for="(item,index) in ClassifList" :key="index">
					<view class="image-box">
						<image :src="item.iamge" mode="widthFix"></image>
					</view>
					<view class="category-info">
						<view class="category-title">
							<view class="eng-title">{{item.categoryEngName}}</view>
							<view class="cha-title">
								{{item.categryName}}
							</view>
						</view>
						<view class="product-box">
							<view 
							@click="toProductDetail()"
							class="product-card" v-for="(item_a,index) in item.categoryList" :key="index">
								<image :src="item_a.Image" mode="widthFix"></image>
								<text>{{item_a.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import headerNavbarVue from '@/components/headerNavbar.vue';
	import minProductCardWVue from '@/components/minProductCardW.vue';
	import {
		navbarHeight,
		capsuleHeight,
		capsuleButton,
		TimeBarHeight
	} from '../../config/systemInfo';
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app'

	const ClassifList = ref([{
			id: '0',
			categryName: '登山装备',
			categoryEngName: "Men's Clothing",
			iamge: 'https://file.whshiyuan.cn:9000/toopu/compressed/1561736147307_compressed_img.jpg',
			categoryList: [{
					name: '冲锋衣',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/1181736147344_compressed_img.jpg'
				},
				{
					name: '软壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/2831736147368_compressed_img.jpg'
				},
				{
					name: '硬壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/3551736147607_compressed_img.jpg'
				}
			]
		},
		{
			id: '1',
			categryName: '背包装备',
			categoryEngName: "Men's Clothing",
			iamge: 'https://file.whshiyuan.cn:9000/toopu/compressed/8251736148519_compressed_img.jpg',
			categoryList: [{
					name: '冲锋衣',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/4261736147653_compressed_img.jpg'
				},
				{
					name: '软壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/4361736147667_compressed_img.jpg'
				},
				{
					name: '硬壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/4261736147653_compressed_img.jpg'
				},
				{
					name: '软壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/4361736147667_compressed_img.jpg'
				},
				{
					name: '硬壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/4261736147653_compressed_img.jpg'
				}
			]
		},
		{
			id: '2',
			categryName: '露营装备',
			categoryEngName: "Men's Clothing",
			iamge: 'https://file.whshiyuan.cn:9000/toopu/compressed/7271736147625_compressed_img.jpg',
			categoryList: [{
					name: '冲锋衣',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/5291736148620_compressed_img.jpg'
				},
				{
					name: '软壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/5291736148620_compressed_img.jpg'
				},
				{
					name: '硬壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/5291736148620_compressed_img.jpg'
				},
				{
					name: '软壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/5291736148620_compressed_img.jpg'
				},
				{
					name: '硬壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/5291736148620_compressed_img.jpg'
				}
			]
		},
		{
			id: '3',
			categryName: '住宿装备',
			categoryEngName: "Men's Clothing",
			iamge: 'https://file.whshiyuan.cn:9000/toopu/compressed/9221736148644_compressed_img.jpg',
			categoryList: [{
					name: '冲锋衣',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/7421736148663_compressed_img.jpg'
				},
				{
					name: '软壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/5301736148686_compressed_img.jpg'
				},
				{
					name: '硬壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/8011736148700_compressed_img.jpg'
				},
				{
					name: '硬壳',
					Image: 'https://file.whshiyuan.cn:9000/toopu/compressed/2551736148719_compressed_img.jpg'
				}
			]
		},
		{
			id: '4',
			categryName: '上学装备',
			categoryEngName: "Men's Clothing",
			iamge: 'https://picsum.photos/390/450',
			categoryList: [{
					name: '冲锋衣',
					Image: 'https://picsum.photos/100/120'
				},
				{
					name: '软壳',
					Image: 'https://picsum.photos/100/120'
				},
				{
					name: '硬壳',
					Image: 'https://picsum.photos/100/120'
				},
				{
					name: '软壳',
					Image: 'https://picsum.photos/100/120'
				},
				{
					name: '硬壳',
					Image: 'https://picsum.photos/100/120'
				}
			]
		}
	]);
	onLoad(()=>{
		scrollToSection('0')
	})
	// 控制锚点栏的偏移量
	const tabBarStyle = ref({
		transform: 'translateX(0px)'
	});
	// 滚动锚点
	const isAnchorBarVisible = ref(true);
	const activeAnchor = ref(''); // 新增变量来追踪当前活动的锚点
	// 滚动锚点
	const isScrolling = ref(false);

	const scrollToSection = (sectionId) => {
		if (isScrolling.value) return;

		const query = uni.createSelectorQuery();
		query.select(`#section-${sectionId}`).boundingClientRect();
		query.selectViewport().scrollOffset();
		query.exec((res) => {
			if (res[0]) {
				isScrolling.value = true;
				uni.pageScrollTo({
					scrollTop: res[0].top + res[1].scrollTop - 175,
					duration: 300,
					success: () => {
						setTimeout(() => {
							isScrolling.value = false;
						}, 300);
					}
				});
			}
		});

		activeAnchor.value = sectionId;
		updateTabBarPosition();
	};

	const updateTabBarPosition = () => {
		const activeIndex = ClassifList.value.findIndex(item => item.id === activeAnchor.value);
		const offset = activeIndex * 50; // 50px 为每个锚点按钮的宽度，可根据实际调整
		tabBarStyle.value = {
			transform: `translateX(-${offset}px)` // 更新位置
		};
	};

	const handleScroll = (event) => {
		if (isScrolling.value) return; // 如果正在滚动，忽略该滚动事件

		const scrollPosition = event.scrollTop || 0;
		let newActiveAnchor = '';
		let closestDistance = Infinity;

		// 获取系统信息，获取屏幕高度
		const systemInfo = uni.getSystemInfoSync();
		const windowHeight = systemInfo.windowHeight;

		const query = uni.createSelectorQuery();
		ClassifList.value.forEach((item) => {
			query.select(`#section-${item.id}`).boundingClientRect((rect) => {
				if (rect) {
					const distance = Math.abs(rect.top - scrollPosition);

					// 判断当前锚点是否在视口内，并且距离顶部足够近
					if (distance < closestDistance && rect.top >= 0 && rect.top < windowHeight) {
						closestDistance = distance;
						newActiveAnchor = item.id;
					}
				}
			});
		});

		query.exec(() => {
			// 如果新锚点与当前锚点不同，更新锚点
			if (newActiveAnchor && newActiveAnchor !== activeAnchor.value) {
				activeAnchor.value = newActiveAnchor;
				updateTabBarPosition();
			}
		});
	};


	onPageScroll(handleScroll);

	onMounted(() => {
		if (typeof window !== 'undefined') {
			window.addEventListener('scroll', handleScroll);
		}
	});

	onUnmounted(() => {
		if (typeof window !== 'undefined') {
			window.removeEventListener('scroll', handleScroll);
		}
	});
	// 点击对应商品
	const toProductDetail =()=>{
		uni.navigateTo({
			url:'/homeSubpages/categoryList/categoryList'
		})
	}
</script>


<style lang="scss" scoped>
	.classifyPage {
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.classify-Content {
			width: 100%;

			.title-box {
				width: 100%;
				padding: 20rpx 30rpx;
				box-sizing: border-box;

				.text {
					width: 100%;
					margin: 0 auto;
					font-size: 36rpx;
				}


			}

			.itembox {
				display: flex;
				white-space: nowrap;
			}

			.category-box {
				width: 100%;

				.category-card {
					width: 100%;
					margin-top: 80rpx;

					.image-box {
						width: 100%;
						border-radius: 26rpx;

						image {
							width: 100%;
							height: 900rpx;
							// w:375px h:450px
							border-radius: 26rpx;
						}
					}

					.category-info {
						width: 100%;
						display: flex;
						flex-direction: column;
						border-radius: 26rpx;
						margin-top: -214rpx;

						.category-title {
							width: 100%;
							display: flex;
							flex-direction: column;
							padding: 70rpx 20rpx;
							justify-content: center;
							box-sizing: border-box;
							backdrop-filter: blur(8px);

							.eng-title {
								font-size: 30rpx;
								color: #d3d3d3;
							}

							.cha-title {
								font-size: 48rpx;
								color: #d3d3d3;
							}
						}

						.product-box {
							width: 100%;
							padding: 20rpx;
							box-sizing: border-box;
							display: flex;
							flex-wrap: wrap;
							gap: 53rpx;

							.product-card {
								display: flex;
								flex-direction: column;
								align-items: center;

								image {
									width: 200rpx;
									height: 240rpx;
								}

								text {
									font-size: 30rpx;
								}
							}
						}
					}
				}
			}

			.tab-buttons {

				display: flex;
				gap: 10px;
				// margin-bottom: 20px;
				padding: 0 20rpx;
				box-sizing: border-box;
				transition: transform 0.3s ease; // 平滑过渡

				.tab-button {
					font-size: 34rpx;
					font-weight: 400;
					color: rgba(203, 203, 203, 1);
					padding: 8px 16px;
					transition: background-color 0.3s, color 0.3s;
				}

				.active {
					font-size: 36rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
					border-bottom: 10rpx solid rgba(56, 56, 56, 1);
				}
			}





		}
	}
</style>